<template>
	<scroll-view class="wxface-dialog" id="facedialog" scroll-y="true">
		<view class="wxface-face-item" @tap="selectface" data-face="[微笑]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/0.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[撇嘴]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/1.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[色]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/2.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[发呆]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/3.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[得意]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/4.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[流泪]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/5.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[害羞]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/6.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[闭嘴]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/7.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[睡]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/8.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[大哭]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/9.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[尴尬]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/10.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[发怒]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/11.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[调皮]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/12.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[呲牙]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/13.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[惊讶]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/14.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[难过]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/15.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[酷]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/16.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[囧]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/17.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[抓狂]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/18.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[吐]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/19.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[偷笑]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/20.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[愉快]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/21.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[白眼]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/22.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[傲慢]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/23.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[困]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/25.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[惊恐]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/26.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[流汗]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/27.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[憨笑]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/28.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[悠闲]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/29.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[奋斗]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/30.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[咒骂]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/31.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[疑问]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/32.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[嘘]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/33.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[晕]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/34.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[衰]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/36.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[骷髅]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/37.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[敲打]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/38.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[再见]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/39.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[擦汗]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/40.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[抠鼻]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/41.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[鼓掌]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/42.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[糗大了]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/43.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[坏笑]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/44.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[左哼哼]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/45.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[右哼哼]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/46.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[哈欠]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/47.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[鄙视]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/48.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[委屈]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/49.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[快哭了]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/50.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[阴险]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/51.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[亲亲]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/52.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[吓]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/53.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[可怜]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/54.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[菜刀]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/55.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[西瓜]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/56.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[啤酒]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/57.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[篮球]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/58.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[乒乓]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/59.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[咖啡]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/60.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[饭]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/61.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[猪头]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/62.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[玫瑰]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/63.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[凋谢]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/64.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[嘴唇]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/65.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[爱心]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/66.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[心碎]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/67.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[蛋糕]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/68.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[闪电]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/69.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[炸弹]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/70.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[刀]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/71.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[足球]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/72.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[瓢虫]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/73.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[便便]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/74.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[月亮]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/75.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[太阳]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/76.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[礼物]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/77.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[拥抱]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/78.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[强]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/79.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[弱]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/80.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[握手]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/81.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[胜利]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/82.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[抱拳]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/83.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[勾引]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/84.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[拳头]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/85.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[差劲]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/86.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[爱你]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/87.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[NO]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/88.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[OK]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/89.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[跳跳]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/90.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[发抖]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/91.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[怄火]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/92.png'"></image>
		</view>
		<view class="wxface-face-item" @tap="selectface" data-face="[转圈]">
			<image class="wxface-face-image" :src="static_url + '/static/chat/wxface/93.png'"></image>
		</view>
	</scroll-view>
</template>
<script>
var app = getApp();
export default {
	data() {
		return {
			pre_url: app.globalData.pre_url
		}
	},
	props: {
		params: {},
		data: {}
	},
	methods: {
		selectface: function (e) {
			var face = e.currentTarget.dataset.face
			this.$emit('selectface', face);
		}
	}
}
</script>
<style>
.wxface-dialog {
	width: 700rpx;
	position: fixed;
	bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	left: 20rpx;
	right: 20rpx;
	margin: 0 auto;
	background: #fff;
	z-index: 9;
	height: 400rpx;
	padding: 20rpx;
}

.wxface-face {
	width: 700rpx;
	position: relative;
	max-height: 400rpx;
	overflow: auto;
	padding: 20rpx;
	font-size: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap
}

.wxface-face-item {
	cursor: pointer;
	display: inline-block;
	vertical-align: bottom;
	padding: 10rpx 4rpx;
	text-align: center;
	width: 10%;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.wxface-face-image {
	width: 44rpx;
	height: 44rpx;
}
</style>